<template>
  <el-drawer
    ref="drawer"
    :title="form.id ? '修改人员信息' : '新增人员信息'"
    :before-close="handleClose"
    :visible.sync="drawer"
    direction="rtl"
    custom-class="demo-drawer"
    size="50%"
    :wrapper-closable="false"
  >
    <el-divider />
    <!-- 内容 -->
    <div class="demo-drawer__content" style="padding: 0 20px">
      <el-form ref="form" label-position="top" :rules="rules" :model="form">
        <!-- 1 小区+栋数-->
        <el-row type="flex">
          <el-form-item label="所属小区" prop="community_code">
            <el-select
              v-model="form.community_code"
              placeholder="请输入"
              style="width: 350px"
              @change="selectSearch1"
            >
              <!-- @change="selectCommunity" -->
              <!-- <el-option /> -->
              <el-option
                v-for="item in CommunityList"
                :key="item.id"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="所属栋数"
            prop="building_code"
            style="margin-left: 30px"
          >
            <el-select
              v-model="form.building_code"
              placeholder="请输入"
              style="width: 350px"
              @change="selectSearch2"
            >
              <el-option
                v-for="item in BuildingList"
                :key="item.id"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-row>
        <!-- 2 房产+成员-->
        <el-row type="flex">
          <el-form-item label="所属房产" prop="house_code">
            <el-select
              v-model="form.house_code"
              placeholder="请输入"
              style="width: 350px"
            >
              <!-- <el-option /> -->
              <el-option
                v-for="item in HosuseList"
                :key="item.id"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="成员姓名"
            style="width: 350px; margin-left: 30px"
            prop="name"
          >
            <el-input
              v-model="form.name"
              placeholder="请输入"
              autocomplete="off"
            />
          </el-form-item>
        </el-row>
        <!-- 3 身份证+出生日期-->
        <el-row type="flex">
          <el-form-item
            label="身份证号"
            style="width: 350px"
            prop="identity_id"
          >
            <el-input
              v-model="form.identity_id"
              placeholder="请输入"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item
            label="出生日期"
            style="width: 350px; margin-left: 30px"
            prop="birth"
          >
            <el-input
              v-model="form.birth"
              autocomplete="off"
              :disabled="true"
            />
          </el-form-item>
        </el-row>
        <!-- 4 电话+职业-->
        <el-row type="flex">
          <el-form-item label="联系方式" style="width: 350px" prop="tel">
            <el-input
              v-model="form.tel"
              placeholder="请输入"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item
            label="职业"
            style="width: 350px; margin-left: 30px"
            prop="occupation"
          >
            <el-input
              v-model="form.occupation"
              placeholder="请输入"
              autocomplete="off"
            />
          </el-form-item>
        </el-row>
        <!-- 5 性别+类型 -->
        <el-row type="flex">
          <el-form-item label="性别" style="width: 350px" prop="gender">
            <el-col>
              <el-radio v-model="form.gender" :label="1">男</el-radio>
              <el-radio v-model="form.gender" :label="0">女</el-radio>
            </el-col>
          </el-form-item>
          <el-form-item
            label="成员类型"
            style="width: 350px; margin-left: 30px"
            prop="owner_type"
          >
            <el-col>
              <el-radio-group v-model="form.owner_type">
                <el-radio :label="1">业主</el-radio>
                <el-radio :label="2">家庭成员</el-radio>
                <el-radio :label="3">租客</el-radio>
              </el-radio-group>
            </el-col>
          </el-form-item>
        </el-row>
        <!-- 上传图片+备注 -->
        <el-row type="flex">
          <el-form-item label="图片" style="width: 350px">
            <!-- 上传组件 -->
            <ImageUpload ref="imgUrl" />
          </el-form-item>
          <el-form-item
            label="备注"
            style="width: 350px; margin-left: 30px"
            prop="remark"
          >
            <el-input
              v-model="form.remark"
              placeholder="请输入"
              autocomplete="off"
            />
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <el-divider />
    <!-- 按钮 -->
    <div class="demo-drawer__footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="addOwner">确定</el-button>
    </div>
  </el-drawer>
</template>
<script>
import {
  showOwnersDetailsApi,
  addOwnersListApi,
  getCommunityListApi,
  showBuildingApi,
  getHosuseListApi,
  editOwnersDetailsApi,
} from "@/api/owners/member";
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
    drawer: {
      type: Boolean,
      default: false,
    },
    memderList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      rules: {
        building_code: [
          {
            required: true,
            message: "所属栋数不可为空",
            trigger: "blur",
          },
        ],
        community_code: [
          {
            required: true,
            message: "所属小区不可为空",
            trigger: ["blur"],
          },
        ],
        house_code: [
          {
            required: true,
            message: "所属房产不可为空",
            trigger: ["blur"],
          },
        ],
        name: [
          {
            required: true,
            message: "成员不可为空",
            trigger: ["blur", "change"],
          },
        ],
      },

      form: {
        building_code: "",
        community_code: "",
        house_code: "",
        birth: "", // 生日
        gender: "", // 性别
        photo: "",
        identity_id: "", // 身份证号
        occupation: "", // 职业
        remark: "", // 备注
        owner_type: "", // 所有者类型
        status: 1,
        name: "",
      },
      CommunityList: [],
      BuildingList: [],
      HosuseList: [],
    };
  },
  created() {
    this.getCommunityList();
  },
  methods: {
    //! 联动
    async selectSearch1() {
      const { data } = await showBuildingApi({
        community_code: this.form.community_code,
      });
      this.form.building_code = "";
      this.form.house_code = "";
      this.BuildingList = data;
    },
    async selectSearch2() {
      const { data } = await getHosuseListApi({
        building_code: this.form.building_code,
      });
      this.HosuseList = data;
    },
    //! 回显
    async editechoDate(id) {
      const { data } = await showOwnersDetailsApi(id);
      this.form = data;
      const { data: res1 } = await showBuildingApi({
        community_code: this.form.community_code,
      });
      const { data: res2 } = await getHosuseListApi({
        building_code: this.form.building_code,
      });
      this.HosuseList = res2;
      this.BuildingList = res1;
      // 回显图片
      this.$refs.imgUrl.fileList = [
        {
          url: "http://124.223.14.236:8881" + data.photo,
          realtiveUrl: data.photo,
        },
      ];
    },
    // !新增/修改
    addOwner() {
      // this.$refs.imgUrl获取子组件中的全部元素
      this.$refs.form.validate(async (flag) => {
        if (!flag) return;
        this.form.photo = this.$refs.imgUrl.fileList[0].realtiveUrl;
        if (this.form.id) {
          await editOwnersDetailsApi(this.form);
          this.$message.success("修改成功");
        } else {
          await addOwnersListApi(this.form);
          this.$message.success("添加成功");
        }
        this.handleClose();
        this.$parent.ownersPagingList();
      });
    },

    //! 渲染小区下拉
    async getCommunityList() {
      const { data } = await getCommunityListApi(this.current, this.pageSize);
      this.CommunityList = data;
    },

    //! 关闭
    handleClose() {
      this.$emit("update:drawer", false);
      this.$refs.form.resetFields();
      this.$refs.imgUrl.fileList = [];
      this.form = {
        building_code: "",
        community_code: "",
        house_code: "",
        birth: "", // 生日
        gender: "", // 性别
        photo: "",
        identity_id: "", // 身份证号
        occupation: "", // 职业
        remark: "", // 备注
        owner_type: "", // 所有者类型
        status: 1,
        name: "",
      };
      this.BuildingList = [];
      this.HosuseList = [];
    },
  },
};
</script>

<style lang="scss" scoped>
.quillEditor {
  line-height: normal;
}
::v-deep .el-drawer__header {
  margin-bottom: 15px;
  position: relative;
  margin-left: 56px;
}
::v-deep .el-icon-close {
  position: absolute;
  left: -35px;
  top: 18px;
}
::v-deep .el-radio {
  margin-right: 15px;
}
::v-deep .el-form {
  height: 500px;
  overflow: scroll;
  overflow-x: hidden;
}
::v-deep .ql-container {
  height: 100px;
}
::v-deep .demo-drawer__footer {
  float: right;
  margin-right: 30px;
}
::v-deep .hr {
  color: #f0f0f0;
}
</style>
